import React,{Component} from 'react'
import login from './Login.module.css'
import { Input,Radio,Button,Icon,Modal,Alert} from 'antd';
import {BrowserRouter as Router,Route,NavLink,Switch,Prompt,withRouter} from 'react-router-dom'
import * as api from '../api/getshangpinlist'

export default class Login extends Component{
	constructor(props) {
	    super(props)
		
	}
	
	showModal = () => {
	    this.setState({
	      visible: true,
	    });
	  };
	handleClose = () => {
	   this.setState({ visible: false });
	 };
	state = { visible: false };
	 handleOk = e => {
	    console.log(e);
	    this.setState({
	      visible: false,
	    });
	  };
	
	  handleCancel = e => {
	    console.log(e);
	    this.setState({
	      visible: false,
	    });
	  };
	tap(){
		this.refs.login1.style.display="none"
		this.refs.login2.style.display="block"
		this.refs.op2.style.color=""
		this.refs.op1.style.color="black"
	}
	tap2(){
		this.refs.login2.style.display="none"
		this.refs.login1.style.display="block"
		this.refs.op1.style.color=""
		this.refs.op2.style.color="black"
	}
	tap4(){
		window.location.href='https://open.weixin.qq.com/connect/qrconnect?appid=wx35126070911d1c38&redirect_uri=http%3A%2F%2Fapicn.gap.cn%2Fgap%2Fstore%2Fcasaba%2Foauth2%2Fauthorize%2FcallBack%2Fwxpc&response_type=code&scope=snsapi_login&state=ebe5e974-a7a4-45d1-a9eb-a6cf93a39c18#wechat_redirect'
	}
	tap3(){
		window.location.href='https://graph.qq.com/oauth2.0/show?which=Login&display=pc&client_id=101052333&redirect_uri=http://apicn.gap.cn/gap/store/casaba/oauth2/authorize/callBack/qq&response_type=code&state=dd5eeceb-18c2-4bb6-9ea0-c2f14abb4ffa'
	}
	tap5(e){
		
		console.log(e.target.checked)
		
	}
	tap6(){
		var yan=parseInt(Math.random()*1000000)
		console.log(yan)
	  let secondsToGo = 5;
	    const modal = Modal.success({
	      title: `${yan}`,
	      content: `验证码将于 ${secondsToGo}s后关闭`,
	    });
	    const timer = setInterval(() => {
	      secondsToGo -= 1;
	      modal.update({
	        content: `验证码将于${secondsToGo}s后关闭`,
	      });
	    }, 1000);
	    setTimeout(() => {
	      clearInterval(timer);
	      modal.destroy();
	    }, secondsToGo * 1000);
	};
	tap7(){
		console.log(this.refs.usr.state.value)
		console.log(this.refs.mima.state.value)
		if(this.refs.usr.state.value&&this.refs.mima.state.value){
			api.getlogin({username:this.refs.usr.state.value,
			password:this.refs.mima.state.value}).then(data => {
				// console.log(data.data.data)
				if(data.data.code==1){
					alert(data.data.msg)
					localStorage.setItem('uid',data.data.data.id)
					localStorage.setItem('username',this.refs.usr.state.value)
					localStorage.setItem('token',data.data.data.token)
				}else{
					alert(data.data.msg)
				}
			})
		}else{
			alert('请填写完整信息')
		}
		
	}
	tap8(){
		console.log(this.refs.phone.value)
		if(this.refs.phone.state.value&&this.refs.ma.state.value&&this.refs.yan.state.value){
			api.getreg({username:this.refs.phone.state.value,
			password:this.refs.ma.state.value}).then(data => {
				console.log(data)
				if(data.data.code==1){
					alert(data.data.msg)
				}else{
					alert(data.data.msg)
				}
			})	
		}else{
			alert('请填写完整信息')
		}
		
	}
	onChange(e){
		console.log(e)
	}
	render(){
		return(
			<div>
				<div className={login.header}>
				<div className={login.tit}>
					<a href="#">
						<p onClick={()=>this.tap()} ref="op1">短信快捷登录/注册</p>
					</a>
					<a href="#">
						<p onClick={()=>this.tap2()} ref="op2" className={login.op2}>账号密码登录</p>
					</a>
				</div>
					
					<hr></hr>
					<div ref="login1">
						<div className={login.usr}>
						账号:
							<Input placeholder="请输入账号" className={login.input} ref="usr"/>
						</div>
						<div className={login.pass}>
						密码:
							<Input placeholder="请输入密码" type="password" className={login.input} ref="mima"/>
						</div>
					
						<div className={login.me}>
							<Radio ref="me" onClick={(e)=>this.tap5(e)}>记住我</Radio>
							
							<a onClick={()=>this.showModal()}>忘记密码</a>
							<Modal
							          title="验证手机"
							          visible={this.state.visible}
							          onOk={this.handleOk}
							          onCancel={this.handleCancel}
							        >
							         <div className={login.usr}>
							         手机号:
							         	<Input placeholder="请输入手机号" className={login.input} ref="tel"/>
							         </div>
									 <div className={login.usr}>
									 手机号:
									 	<Input placeholder="请输入密码" className={login.input} ref="tel"/>
									 </div>
							         <div className={login.pass}>
							         验证码:<br/>
							         	<Input placeholder="请输入短信验证码" className={login.input1}/>
							         	 <Button onClick={()=>this.tap6()}>发送验证码</Button>
							         </div>
							         <Button type="primary" className={login.btn}>下一步</Button>
									 
									 
									 
							        </Modal>
						</div>
						<Button type="primary" className={login.btn} onClick={()=>this.tap7()}>登录</Button>
					</div>
					<div ref="login2" className={login.login2}>
						<div className={login.usr}>
						手机号:
							<Input placeholder="请输入手机号" className={login.input} ref="phone"/>
						</div>
						<div className={login.usr}>
						密码:
							<Input placeholder="请输入密码" type="password" className={login.input} ref="ma"/>
						</div>
						<div className={login.pass}>
						验证码:<br/>
							<Input placeholder="请输入短信验证码" className={login.input1} ref="yan"/>
							 <Button onClick={()=>this.tap6()}>发送验证码</Button>
						</div>
						<Button type="primary" className={login.btn} onClick={()=>this.tap8()}>注册</Button>
					</div>
					<div className={login.kuai}></div>
					第三方登录<br/>
					<div className={login.ic}>
					
						<Icon type="qq" className={login.icon} onClick={()=>this.tap3()}/>
						<Icon type="wechat" className={login.icon} onClick={()=>this.tap4()}/>
					</div>
					
					
				</div>
				
				
				
				
				
			</div>
		)
	}
	componentDidMount(){
		this.refs.op2.style.color="black"
	}
	
}
